<template>
  <nav>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <a :href="item.url">
          <img :src="item.imageUrl" alt="" />
        
        </a>
      </van-swipe-item>
    </van-swipe>
  </nav>
</template>

<script>
export default {
  name: "MusicSwiper",
  props: ["banners"],
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  height: 10rem;
  border-radius: .3125rem;
  overflow: hidden;
  a {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
   
  }
}
</style>